<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Wake Lock Demo</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
	
	<!-- my styles -->
	<link rel="stylesheet" href="moz.css">

	<style>
		#status {
			width: 50vw; min-width: 500px;
			margin-top: 20px;
		}
		#status h2 {margin-top: 0px;}
		#status p {padding-left: 20px;}
		[data-status="off"] ~ #status {
			border: 2px solid red;
		}
		[data-status="on"] ~ #status {
			border: 2px solid green;
		}
	</style>

	<script src="script.js" defer></script>

</head>
<body>
	<header>
		<h1>Wake Lock Demo</h1>
	</header>

	<p>The button below changes depending on whether wake lock is active or not.</p>

	<button data-status="off">Turn Wake Lock ON</button>

	<section id="status">
		<h2>Wake Lock Status</h2>
		<p></p>
	</section>
	
	<p>Wake lock will automatically release if if the tab becomes inactive.</p>
	<p>To re-activate the wake lock automatically when the tab becomes active again, check this box: <input type="checkbox" id="reaquire" /></p>


</body>
</html>
